<template>
  <v-app>
    <v-card>
      <v-toolbar >
      <v-toolbar-title>综合评价</v-toolbar-title>
    </v-toolbar>
      <v-card-text>
        <v-data-table
          :headers="headers"
          :items="desserts"
          
          hide-default-footer
          disable-pagination
        >
          <template v-slot:item.result="{item}">
            <v-rating v-model="item.systemTotal" hover></v-rating>
          </template>
          <template v-slot:body.append="{ headers }">
            <tr>
              <td>
                <span>
                  <strong>总分：</strong>
                </span>
              </td>
              <td :colspan="headers.length">
                <span>{{total}}</span>
              </td>
            </tr>
            <tr>
              <td>
                <span>
                  <strong>评价</strong>
                </span>
              </td>
              <td :colspan="headers.length">
                <v-radio-group row>
                  <v-radio label="建议提升" value="建议提升"></v-radio>
                  <v-radio label="工作表现良好" value="工作表现良好"></v-radio>
                  <v-radio label="有进步" value="有进步"></v-radio>
                  <v-radio label="适合现职" value="适合现职"></v-radio>
                  <v-radio label="不可能有大进展" value="不可能有大进展"></v-radio>
                  <v-radio label="不适合现职位" value="不适合现职位"></v-radio>
                  <v-radio label="工作表现退步" value="工作表现退步"></v-radio>
                </v-radio-group>
              </td>
            </tr>
            <tr>
              <td>
                <span>
                  <strong>简述该员工最突出的优点和缺点</strong>
                </span>
              </td>
              <td :colspan="headers.length">
                <v-textarea outlined></v-textarea>
              </td>
            </tr>
            <tr>
              <td>
                <span>
                  <strong>简述该员工在工作表现及行为上应注意、改善和发扬光大之处</strong>
                </span>
              </td>
              <td :colspan="headers.length">
                <v-textarea outlined></v-textarea>
              </td>
            </tr>
          </template>
          <template  v-slot:footer>
            <div style="padding:5px">
                  <v-btn class="white--text" color="green darken-1" depressed>
                保存
                <v-icon right>mdi-content-save</v-icon>
              </v-btn>
            </div>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    headers: [
      { text: "考核名称", value: "systemName" },
      { text: "考核指标", value: "indexName" },
      { text: "总分", value: "systemTotal" },
      { text: "评价", value: "result" }
      // { text: "操作", value: "actions", sortable: false }
    ],
    desserts: []
  }),

  computed: {
    total() {
      var sum = 0;
      this.desserts.forEach(element => {
        sum += element.systemTotal;
      });
      return sum;
    }
  },

  watch: {},

  created() {
    this.initDate();
  },

  methods: {
    initDate() {
      this.axios.get("/asePlan/system/员工转正考核").then(res => {
        this.desserts = res.data.data;
      });
    }
  }
};
</script>